<template>
    <div>
      <header-tilte :title="title"></header-tilte>
      <loading v-if="isShowLoading"></loading>
      <div class="flex_center" v-if="!isShowLoading">
        <div class="bodyContent">
          <div style="margin-top: 0.5rem">
            <!--<default-address v-on:childByValue="childByValue"></default-address>-->
            <share-default-address v-on:childByValue="childByValue" :qrCode="qrCode"></share-default-address>
          </div>
          <div class="goods_choose white_bac flex flex_vertical_center flex_between" style="margin-top: 0.5rem" @click="openBotttomSheet">
            <div class="choose_left flex flex_vertical_center">
              <i class="fa fa-cart-arrow-down"></i>
              <p>点击添加或查看已选算商品</p>
            </div>
            <i class="fa fa-angle-right"></i>
          </div>
          <div class="bookingRemark white_bac">
            <mu-text-field class="bookingRemarkText" v-model="description" placeholder="有特殊要求请在这里备注" multi-line :rows="2" :rows-max="3"></mu-text-field>
          </div>
          <div class="accounts_foot flex flex_end">
            <!--<div class="sure_bottom" @click="setAccounts()">
              结算
            </div>-->
            <div class="bookingButton positon_fix" @click="setAccounts()">
              <mu-button color="error">确定订水</mu-button>
            </div>
          </div>
          <mu-bottom-sheet :open.sync="open">
            <mu-list >
              <mu-sub-header class="flex flex_between" style="margin-right: 1rem;padding: 0.5rem;background: #f1f1f1">
                <mu-button flat @click="closeBottomSheet">关闭</mu-button>
                <mu-button flat color="secondary" @click="sureChoosed">确定</mu-button>
              </mu-sub-header>
              <div class="choose_more_content">
                <div class=" white_bac pading1 order_goods flex order_border_bom" v-for="(goods,index) in share_bill_list">

                  <img :src="goods.goods_img">
                  <div class="goods_width">
                    <p class="flex flex_between ">
                      <span class="goods_name">{{goods.goods_name}}</span>
                      <!--<span>@@{{goods.id}}</span>-->
                    </p>
                    <p class="flex flex_between " style="color: #ff4081"><span>￥ {{goods.goods_price}}</span> </p>
                    <div class="flex flex_between">
                      <div class="flex flex_vertical_center">
                        <p style="" v-if="goods.rest_num > 0"> 水票：<span style="color: #2196f3">{{goods.rest_num}}</span>张 </p>
                      </div>
                      <div class="add_minus flex_center">
                        <img src="../mall/img/minus-circle.png" v-if="goods.count > 0" @click="minusCount(goods)">
                        <span style="color: #93999f;font-size: 10px" v-if="goods.count > 0">{{goods.count}}</span>

                        <img src="../mall/img/add.png" @click="addCount(goods)">

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </mu-list>
          </mu-bottom-sheet>
          <mu-dialog title="提示" width="360" :open.sync="openSimple" class="bucket_alert">
            <p>请重新扫码</p>
            <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">确定</mu-button>
          </mu-dialog>
        </div>
      </div>
    </div>
</template>

<script>
    import HeaderTilte from "../../components/headerTilte";
    import Loading from "../../components/loading";
    import ShareDefaultAddress from "../../components/other/components/ShareDefaultAddress";

    export default {
      data(){
        return{
          isShowLoading:true,
          openSimple: false,
          title:'水票订水',
          addressChoosed:'',
          endGoodsList: {},
          allMoney:0,
          description:'',
          open: false,
          qrCode:'',
          share_bill_list:[],
          choosedIds:''
        }
      },
      mounted(){
        this.initQrkey();
      },
      methods:{
        initQrkey(){
          var key = '';
          var type = 1; // 不需要刷新页面
          var currentTime = new  Date().getTime();
          var qrKey = this.$route.query.qrKey;
          if(qrKey != null){
            key = qrKey;
            this.setCache('share_key_value',key);
            this.setCache('share_key_expires', currentTime);
          } else {
            type = 0;
            if(this.getCache('share_key_expires')) {
              var nowTime = new Date().getTime();
              var expires = this.getCache('share_key_expires');
              // 判断缓存是否大于一天
              if(nowTime - expires > 1000 * 3600 * 24) {
                this.deleteCache('share_key_value');
                this.deleteCache('share_key_expires');
              } else {
                key = this.getCache('share_key_value')
              }
            }
          }
          if(key == '') {
            this.openSimpleDialog();
            this.isShowLoading = false;
            return false;
          } else {
            this.qrCode = key;
            /*return {qrKey:key,type:type};*/
            if(key != '' && type == 1) {
              location.href = location.protocol+'//'+location.host+location.pathname + '?_=' + currentTime;
            }
            if(key) {
              this.initList();
              this.endGoodsList = this.getCache(this.getShareKey('share_end_goods_list_')) || {}
              console.log(this.endGoodsList)
            }
          }
        },
        initList(){
          this.yesS.shareBillList(
            this.$combineParams({qrKey:this.qrCode})
          ).then(res =>{
            this.share_bill_list = res.data.waterbill_list;
            this.isShowLoading = false;
            this.$nextTick(function () {
              this.evaluateGoodsList();
            })
          })
        },
        evaluateGoodsList(){
          if(!this.isEmpty(this.share_bill_list) && this.share_bill_list.length >0){
            for (var i=0;i<this.share_bill_list.length;i++){
              var goods = this.share_bill_list[i];
              goods.num =  goods.count;
              if(!this.isEmpty(this.endGoodsList)){
                if(!this.isEmpty(this.endGoodsList[goods.goods_id])){
                  goods.num = goods.count = this.endGoodsList[goods.goods_id].num;
                }else {
                  goods.num =  goods.count = 0;
                }
              }else {
                goods.num =  goods.count = 0;
              }
            }
          }
          this.showLoading = false
        },
        childByValue: function (childValue) {
          // childValue就是子组件传过来的值
          this.addressChoosed = childValue;
        },
        closeBottomSheet () {
          this.open = false;
          this.choosedIds ='';
        },
        openSimpleDialog () {
          this.openSimple = true;
        },
        closeSimpleDialog () {
          this.openSimple = false;
        },
        openBotttomSheet () {
          this.open = true;
        },

        minusCount(obj){
          obj.count--;
          if(this.choosedIds.indexOf(','+obj.goods_id+',') == -1){ //表示包含
            this.choosedIds += ','+obj.goods_id +',';
          }


        },
        addCount(obj){
          //判断是否超标
          if(obj.ticketNum > 0 && obj.ticketNum <= obj.count){
            return;
          }
          obj.count = parseInt(obj.count) + 1;

          if(this.choosedIds.indexOf(','+obj.goods_id+',') == -1){ //表示不包含
            this.choosedIds += ','+obj.goods_id +',';
          }

        },

        sureChoosed(){
          if(this.isEmpty(this.choosedIds)){
            this.closeBottomSheet();
            return;
          }

          for(var i=0;i<this.share_bill_list.length;i++){
            var goods = this.share_bill_list[i];
            if(this.choosedIds.indexOf(','+goods.goods_id+',') != -1){//如果包含
              if(this.isEmpty(this.endGoodsList[goods.goods_id])){
                if(goods.count > 0){
                  this.endGoodsList[goods.goods_id] = {id:goods.goods_id,num:goods.count,bill_id:goods.id};
                }
              }else {
                if(goods.count > 0){
                  this.endGoodsList[goods.goods_id].num = goods.count;
                }else {
                  delete this.endGoodsList[goods.goods_id];
                }
              }
            }
          }
          this.setCache(this.getShareKey('share_end_goods_list_'),this.endGoodsList);
          console.log(this.endGoodsList)
          //关闭弹框
          this.closeBottomSheet();
        },
        getShareKey (type) {
          var key = type + this.qrCode;
          console.log(key)
          return key;
        },
        setAccounts(){
          //判断是否有地址
          if(this.addressChoosed == undefined || this.addressChoosed == null || this.addressChoosed == ''){
            this.$toast.error('还未填写地址，请点击填写');
            return;
          }
          console.log(this.share_bill_list)
          console.log(this.endGoodsList)
          var addressDetail = this.addressChoosed.area_info+' '+this.addressChoosed.position_address+this.addressChoosed.address;
          this.yesS.addOrderWbGoods(
            this.$combineParams({
              goods_list:this.endGoodsList,
              money:0,
              pay_type:0,
              buyer_name:this.addressChoosed.name,
              mobile:this.addressChoosed.mobile,
              buyer_address:addressDetail,
              description:this.description,
              qrKey:this.qrCode
            })).then(res => {
            var status = res.status;
            if(status == 1){
              this.deleteCache(this.getShareKey('share_end_goods_list_'));
              this.endGoodsList = {};
              this.evaluateGoodsList();
            }
          })
        },
      },
      components: {
        ShareDefaultAddress,
        Loading,
        HeaderTilte
        },
      watch:{
        open: {
          handler(curVal, oldVal) {
            if (!curVal && !this.isEmpty(this.choosedIds)) {
              //如果是关闭
              for (var i = 0; i < this.share_bill_list.length; i++) {
                var goods = this.share_bill_list[i];
                if (!this.isEmpty(this.endGoodsList[goods.goods_id])) {
                  goods.count = goods.num = this.endGoodsList[goods.goods_id].num;
                } else {
                  goods.count = goods.num;
                }
              }
            }
          }
        }
      },
      name: "share-ticket"
    }
</script>

<style scoped>
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
  .goods_choose{
    padding: 1rem;
  }

  .goods_choose i {
    margin-right: 0.5rem;
    font-size: 1.2rem;
  }
  .bookingRemark {
    margin-top: 0.3rem;
  }

  .bookingRemarkText{
    margin-top: 0.3rem;
    width: 90%;
    font-size: 0.75rem;
  }

  .accounts_foot{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3rem;
    background-color: #fff;
  }

  .accounts_foot p{
    line-height: 3rem;
    margin-right: 1rem;
  }
  .sure_bottom{
    background: #ef1336;
    line-height: 3rem;
    color: #fff;
    width: 6rem;
    height: 3rem;
    font-size: 1rem;
    font-weight: bold;
  }
  .choose_more_content{
    max-height: 25rem;
    overflow: hidden;
    overflow-y: auto;
  }
  .order_goods img{
    width: 4rem;
    height: 4rem;
  }
  .order_border_bom {
    border-bottom: 2px solid #fafafa;
  }
  .goods_width{
    width: 80%;
    margin-left: 0.5rem;
  }

  .goods_name {
    width: 60%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .goods_width img {
    width: 1rem;
    height: 1rem;
  }

  .add_minus img {
    width: 1.5rem !important;
    height: 1.5rem!important;
  }
  .goods_width img {
    width: 1rem;
    height: 1rem;
  }
  .order_goods img {
    width: 4rem;
    height: 4rem;
  }
  .add_minus span {
    width: 2rem!important;
    text-align: center;
  }
  .bucket_alert p{
    font-size: 0.96rem;
  }
  .bookingButton{
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .bookingButton button{
    width: 100% !important;
    height: 45px!important;
    line-height: 45px!important;
  }
</style>
